<template>
  <div class="flex pt-[30px] w-full border-2 rounded-b-xl shadow-lg fixed z-10 bg-white">
    <div class="flex w-[15%] justify-center items-center" >
      <span v-if="!isHomePage" @click="goBack"><van-icon name="arrow-left" />返回</span>
    </div>
    <div class="flex-1 flex items-center">
      <div class="flex flex-col h-full w-full">
        <div class="flex w-full flex-1 justify-center">
          {{ pathTitle }}
        </div>
        <div class="flex w-full flex-1 justify-center text-xs">
          {{ time }}
        </div>
      </div>
    </div>
    <div class="flex w-[15%]"></div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import moment from "moment";
import router from "@/router";
import { useEditOstInfo } from "@/store/edit-ost-info";
import { useBillInfo } from "@/store/bill-info";

const time = ref(moment().format("M-D HH:mm:ss"));
const pathTitle = ref(router.currentRoute.value.meta.title);
const isHomePage = ref(true);

onMounted(() => {
  timer();
});

watch(
  () => router.currentRoute.value,
  (newValue, oldValue) => {
    pathTitle.value = newValue.meta.title;
    isHomePage.value = newValue.meta.isHomePage as boolean;
  },
  { immediate: true }
);
function timer(): void {
  time.value = moment().format("M-D HH:mm:ss");
  setTimeout(() => {
    timer();
  }, 1000);
}
function goBack(): void {
  const editInfo = useEditOstInfo();
  const billInfo = useBillInfo();
  editInfo.removeEditOstInfo();
  billInfo.removeBillInfo();
  router.back();
}
</script>

<style scoped></style>
